<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax</title>
  </head>
  <body>
    <table
      class="studens"
      border="1px"
      width="500px"
      style="border-collapse: collapse"
    >
      <caption>
        学生成绩表
      </caption>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>成绩</th>
          <th>住址</th>
        </tr>
      </thead>
    </table>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    console.dir($);
    // //写法1
    // $.ajax({
    //   type: "get",
    //   url: "./data/data.json",
    //   async: true,
    //   success: function (students) {
    //     //请求成功执行该代码
    //     console.log(students);
    //     for (var i in students) {
    //       var data = $(
    //         "<tr><td>" +
    //           students[i].id +
    //           "</td><td>" +
    //           students[i].name +
    //           "</td><td>" +
    //           students[i].sex +
    //           "</td><td>" +
    //           students[i].age +
    //           "</td><td>" +
    //           students[i].score.join(" ") +
    //           "</td><td>" +
    //           students[i].addr +
    //           "</td></tr>"
    //       );
    //       //倒序添加数据
    //       $(".studens").prepend(data);
    //     }
    //   },
    //   error: function (err) {
    //     //请求失败执行该代码
    //     console.log(err.statusText);
    //     if (err.status == 404) {
    //       location.href = "404.html";
    //     }
    //   },
    // });
    // //写法2
    // $.ajax({
    //   type: "get",
    //   url: "./data/data.json",
    //   async: true,
    // })
    //   .done(function (students) {
    //     for (var i in students) {
    //       var data = $(
    //         "<tr><td>" +
    //           students[i].id +
    //           "</td><td>" +
    //           students[i].name +
    //           "</td><td>" +
    //           students[i].sex +
    //           "</td><td>" +
    //           students[i].age +
    //           "</td><td>" +
    //           students[i].score.join(" ") +
    //           "</td><td>" +
    //           students[i].addr +
    //           "</td></tr>"
    //       );
    //       $(".studens").prepend(data);
    //     }
    //   })
    //   .fail(function (err) {
    //     if (err.status == 404) {
    //         location.href="404.html";
    //     }
    //   });
    //写法3
    $.ajax({
      type: "get",
      url: "./data/data.json",
      async: true,
    })
      .then(function (students) {
        for (var i in students) {
          var data = 
            "<tr><td>" +
              students[i].id +
              "</td><td>" +
              students[i].name +
              "</td><td>" +
              students[i].sex +
              "</td><td>" +
              students[i].age +
              "</td><td>" +
              students[i].score.join(" ") +
              "</td><td>" +
              students[i].addr +
              "</td></tr>"
          ;
          $(".studens").prepend(data);
        }
      })
      .catch(function (err) {
        if (err.status == 404) {
          location.href = "404.html";
        }
      });
  </script>
</html>
